<template>
  <div id="home-page">
    <div>
      <el-carousel
        indicator-position="outside"
        class="el-carousel"
        height="23rem"
      >
        <el-carousel-item
          class="carousel-item"
          v-for="item in carouselList || []"
          :key="item.id"
        >
          <img
            :src="'http://localhost:8888' + item.imgUrl"
            alt=""
            class="carousel-image"
            @click="jumpToSong(item.id)"
          />
        </el-carousel-item>
      </el-carousel>
    </div>
    <div id="container">
      <div id="songs-container">
        <div class="recommend">
          <div class="title">
            <span class="tip">推荐音乐</span>
          </div>
          <div class="songs">
            <TinyPanel
              class="tiny-panel-h"
              :class="{ mark: isMarkUp === index }"
              v-for="(item, index) in rSongsList"
              :songVO="item"
              :key="index"
              @mousemove="isMarkUp = index"
              @mouseleave="isMarkUp = -1"
              @click="jumpToSong(item.id)"
            ></TinyPanel>
          </div>
        </div>
        <div class="recommend">
          <div class="title">
            <span class="tip">新上架</span>
          </div>
          <div class="songs">
            <TinyPanel
              class="tiny-panel-h"
              :class="{ mark: isMarkDown === index }"
              v-for="(item, index) in nSongsList"
              :songVO="item"
              :key="index"
              @mousemove="isMarkDown = index"
              @mouseleave="isMarkDown = -1"
              @click="jumpToSong(item.id)"
            ></TinyPanel>
          </div>
        </div>
      </div>
      <div id="artist-container">
        <div class="title">
          <span class="tip">音乐人</span>
        </div>
        <div class="artists">
          <ArtistPanel
            class="artist-panel"
            v-for="(item, index) in artistsList"
            :class="{ mark: isMarkArtist === index }"
            :artistVO="item"
            :key="index"
            @mousemove="isMarkArtist = index"
            @mouseleave="isMarkArtist = -1"
          ></ArtistPanel>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onBeforeMount, ref } from 'vue'
import { type ArtistVO, type CarouselDTO, type PageDTO, type SongsPageDTO, type SongsPageInfo } from '@/types/song'
import { getArtistListAPI, getCarouselListAPI, getSongsListAPI } from '@/services/songService.ts'
import type { UnifyResponse } from '@/types/result'
import TinyPanel from '@components/TinyPanel.vue'
import { SortBy, SortOrder } from '@/utils/common/enum.ts'
import router from '@/utils/router'
import { ApiException } from '@/utils/exception/api-exception.ts'
import ArtistPanel from '@components/ArtistPanel.vue'

const rSongsList = ref<SongsPageDTO[]>([])
const nSongsList = ref<SongsPageDTO[]>([])
const artistsList = ref<ArtistVO[]>([])
const isMarkUp = ref<number>(-1)
const isMarkDown = ref<number>(-1)
const isMarkArtist = ref<number>(-1)
const carouselList = ref<CarouselDTO[] | null>(null)

const jumpToSong = (id: number): void => {
  router.push({ name: 'Song', params: { id: id } })
}

const initCarouselList = async () => {
  try {
    const res: UnifyResponse<CarouselDTO[]> = await getCarouselListAPI()
    carouselList.value = res.data
  } catch (error) {
    console.error(error)
  }
}

const initSongsList = async () => {
  try {
    const songsPageInfo: SongsPageInfo = {
      page: 1,
      size: 3,
      sortBy: SortBy.COUNT,
      sortOrder: SortOrder.DESC,
    }
    const rSongRes: UnifyResponse<PageDTO<SongsPageDTO[]>> = await getSongsListAPI(songsPageInfo)
    rSongsList.value = rSongRes.data?.records || []
    songsPageInfo.sortBy = SortBy.CREATED
    const nSongRes: UnifyResponse<PageDTO<SongsPageDTO[]>> = await getSongsListAPI(songsPageInfo)
    nSongsList.value = nSongRes.data?.records || []
  } catch (error) {
    console.error(error)
  }
}

const initArtistList = async () => {
  try {
    const res: UnifyResponse<ArtistVO[]> = await getArtistListAPI()
    artistsList.value = res.data || []
  } catch (error) {
    if (error instanceof ApiException) {
      console.error(error)
    }
  }
}

onBeforeMount(async () => {
  await initCarouselList()
  await initSongsList()
  await initArtistList()
})
</script>

<style scoped>
::-webkit-scrollbar {
  display: none;
}

#home-page {
  width: 70rem;
  margin: 1em auto 0;
  background: linear-gradient(90deg, rgba(255, 237, 153, 0.34), rgba(216, 143, 255, 0.31) 58%);
}

.el-carousel__item h3 {
  display: flex;
  color: #3185e6;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.carousel-image {
  width: 100%;
  height: 100%;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}

#container {
  width: 100%;
  height: 43em;
  display: flex;
  justify-content: space-between;
}

.songs {
  display: flex;
  flex-direction: row;
  align-items: center;
}

#songs-container {
  width: 45em;
  height: 40em;
}

#artist-container {
  width: 20em;
  height: 41em;
  overflow: hidden;
  background-color: #58a9d1;
  margin-top: 1rem;
  margin-right: 1.5rem;
  border-radius: 2em;
}

.recommend {
  width: 100%;
  height: 20rem;
  margin-top: 1rem;
  margin-left: 1.5rem;
  background-color: #e6e6e6;
  display: flex;
  flex-direction: column;
  border-radius: 2em;
}

.title {
  height: 5em;
  background-color: #545759;
  display: flex;
  justify-content: space-between;
  border-top-left-radius: 2em;
  border-top-right-radius: 2em;
}

.tip {
  color: #ffffff;
  font-size: 1.5em;
  font-weight: bold;
  margin-top: 1.5rem;
  margin-left: 1rem;
}

.tiny-panel-h {
  margin-top: 1em;
  margin-left: 1.5em;
}

.mark {
  transform: scale(1.2);
  cursor: pointer;
}

.carousel-image:hover {
  cursor: pointer;
}

.artists {
  height: 88%;
  overflow: hidden;
  overflow-y: scroll;
}

.artist-panel {
  margin: 0.5em 0;
  border: 3px solid black;
}
</style>
